<template>
	<view>
		<head-navbar :back="true">
			<view>
				<text>选择子账号</text>
			</view>
		</head-navbar>
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item,index) in list"  @click="toSelect(item.select,item.count,index)">
					<image v-if="item.select" src="../../static/img/select.png"></image>
					<image v-else src="../../static/img/select_none.png"></image>
					<view class="user">{{item.accountNo}}</view>
					<view class="reper" :class="{zero:item.count == 0}">剩余{{item.count}}次</view>
				</view>
				<view class="item" v-for="(item,index) in uniList"  @click="toSelect(item.count,index)">
					<image  src="../../static/img/noSelect.png"></image>
					<view class="user" :class="{zero:item.count == 0}">{{item.accountNo}}</view>
					<view class="reper" :class="{zero:item.count == 0}">剩余{{item.count}}次</view>
				</view>
			</view>
			<u-loadmore color='#949494' :status="status" bg-color="rgba(255,255,255,0)" margin-top='20' margin-bottom='15'
			 @loadmore='laodmore' :loadText="loadText" />
		</view>
		<view class="bottombox">
			<view class="item2">
				<image @click="toAllSelect()" v-if="allSelect" src="../../static/img/select.png" style="height: 36rpx; width: 36rpx; top: 25rpx; left: 25rpx;" class="select-text"></image>
				<image @click="toAllSelect()" v-else src="../../static/img/select_none.png" style="height: 36rpx; width: 36rpx; top: 25rpx; left: 25rpx;" class="select-text"></image>
				<text>已选中{{accountNoList.length}}个</text>
				<button class="btn2" @click="toback">确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import * as api from '../../api/group/index.js'
	export default {
		data() {
			return {
				allSelect:false,
				list: [],
				uniList:[],
				accountNoList:[],
				childUserId:[],
				status: 'loading',
				loadText: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '努力加载中',
					nomore: '没有更多了哦'
				},
			}
		},
		onLoad() {
			this.getChildUserByUserCode()
		},
		watch: {
			list: {
				handler(n, o) {
					var list = []
					var list2 = [] 
					for(var i=0;i<n.length;i++){
						if(n[i].select == false){
							this.allSelect = false
						}else{
							list.push(n[i].accountNo)
							list2.push(n[i].id)
							this.allSelect = true
						}
					}
					this.accountNoList = list
					this.childUserId = list2
				},
				immediate: true,  //刷新加载 立马触发一次handler
				deep: true  // 可以深度检测到 list 对象的属性值的变化
			}
		},
		methods: {
			laodmore() {
				this.status = 'loading'
				this.list = []
				this.getChildUserByUserCode()
			},
			getChildUserByUserCode() {
				api.getChildUserByUserCode().then(res => {
					this.status = 'nomore'
					for (var i = 0; i < res.data.dataBody.length; i++) {
						if(res.data.dataBody[i].count == 0){
							this.uniList.push(res.data.dataBody[i])
						}else{
							res.data.dataBody[i].select = false
							this.list.push(res.data.dataBody[i])
						}
					}
				}).catch(err => {
					this.status = 'loadmore'
				})
			},
			toback() {
				if(this.accountNoList.length == 0){
					uni.showToast({
						title:'请选择子账号',
						icon:'none'
					})
					return
				}
				this.$api.prePage().childUserIds = this.childUserId
				this.$api.prePage().accountNos = this.accountNoList
				uni.navigateBack({
					delta: 1
				})
			},
			toAllSelect(){
				this.allSelect = !this.allSelect
				for(var i=0;i<this.list.length;i++){
					this.list[i].select = this.allSelect
				}
			},
			toSelect(select, num, index) {
				if (num == 0) {
					uni.showToast({
						title: '此账号剩余次数为0',
						icon: 'none'
					})
					return
				}
				if (select == false) {
					// this.list[index].select = true
					this.$set(this.list[index], 'select', true)
				} else {
					// this.list[index].select = false
					this.$set(this.list[index], 'select', false)
				}
			},
		}
	}
</script>

<style lang="scss">
	.bottombox {
		position: fixed;
		padding: 20rpx;
		background: #f6f6f6;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		z-index: 9999;

		.item2 {
			height: 80rpx;
			border-radius: 100rpx;
			background-color: #FFFFFF;
			margin: 0 auto;

			.select-text {
				margin-right: 40rpx;
				margin-bottom: 20rpx;
			}

			.btn2 {
				height: 80rpx;
				position: fixed;
				background: linear-gradient(270deg, #ff2020, #ff5a02);
				;
				border-radius: 100rpx;
				color: #FFFFFF;
				width: 222rpx;
				right: 20rpx;
				bottom: 20rpx;
			}
		}
	}

	.content {
		padding-bottom: 120rpx;

		.list {
			padding: 20rpx;
			padding-bottom: 0;

			.item {
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				padding: 25rpx 40rpx;
				display: flex;
				align-items: center;
				color: #000000;
				text-align: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.user {
					flex: 2;
					text-align: left;
					margin-left: 20rpx;
				}

				.reper {
					color: #FF5C02;
					flex: 1;
				}

				.zero {
					color: #949494;
				}

				.btn {
					margin: 0 auto;
					width: 80%;
					font-size: 24rpx;
					padding: 15rpx;
					background: #f4f4f4;
					border-radius: 10rpx;
				}

				.btn2 {
					color: #FFFFFF;
					background: linear-gradient(270deg, #ff2020, #ff5a02);
					;
				}
			}
		}

		.itemTop {
			font-size: 28rpx !important;
			font-weight: 600 !important;
		}
	}
</style>
